// import * as echarts from "../lib/echarts.min.js";
function histogram(chartid, girth) {
  var chart = echarts.init(document.getElementById(chartid));
  // window.onresize = function () {
  //   chart.resize();
  // };
  let values = girth.map(d=>d[0]);

  var bins = ecStat.histogram(values);

  if (bins.bins[0].x0 < 0) {
    bins.bins = bins.bins.splice(1, bins.bins.length - 1);
    bins.customData = bins.customData.splice(1, bins.bins.length - 1);
    bins.data = bins.data.splice(1, bins.bins.length - 1);
  }
  let data_scatter = [];
  let jitter = ecStat.statistics.max(bins.customData.map((d) => d[2]));
  girth.forEach((d) => {
    data_scatter.push([d[0], Math.random() * jitter, d[1]]);
  });
  var option = {
    title: {
      text: "频数分布",
      left: "center",
      top: 20,
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      // boundaryGap: '5%',
      scale: true, //这个一定要设，不然barWidth和bins对应不上
      axisLabel: { show: false },
    },
    yAxis: {},
    series: [
      {
        name: "height",
        type: "bar",
        barWidth: "99.3%",
        // barCategoryGap: 0,
        label: {
          normal: {
            show: true,
            position: "top",
            // position: "insideTop",
          },
        },
        data: bins.data,
        tooltip: {
          formatter: function (params) {
            return "密度中心:" + params.data[0] + ";数量:" + params.data[1];
          },
        },
      },
      {
        symbolSize: 5,
        data: data_scatter,
        type: "scatter",
        tooltip: {
          formatter: function (params) {
            return params.data[2] + ":" + params.data[0];
          },
        },
      },
    ],
  };
  chart.setOption(option);
  chart.resize()
}

function boxplot(chartid, girth) {
  var chart = echarts.init(document.getElementById(chartid));
  let values = girth.map(d=>d[0]).sort((a,b)=>a-b);
  let q1 = ecStat.statistics.quantile(values, 0.25);
  let q2 = ecStat.statistics.quantile(values, 0.5);
  let q3 = ecStat.statistics.quantile(values, 0.75);
  let max = ecStat.statistics.max(values);
  let min = ecStat.statistics.min(values);
  let iqr = q3 - q1;
  let up = q3 + iqr * 1.5
  let down = q1 - iqr * 1.5
  let data_box = [ down < min ? min : down, q1, q2, q3, up > max ? max : up, ];
  let data_scatter = [];
  girth.filter(d => d[0] > up || d[0] < down).forEach(d => {
    data_scatter.push([d[0], 0, d[1]]);
  chart.resize()
});

  let option = {
    grid: { left: "6%", right: "3%" },
    yAxis: {
      type: "category",
      boundaryGap: true,
      nameGap: 30,
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: { show: false },
    },
    xAxis: {
      type: "value",
      splitArea: {
        show: true,
      },
    },
    tooltip: {},
    dataset: [
      {
        source: [values],
      },
      {
        transform: {
          type: "boxplot",
          config: { itemNameFormatter: "expr {value}" },
        },
      },
      {
        fromDatasetIndex: 1,
        fromTransformResult: 1,
      },
    ],
    series: [
      {
        name: "boxplot",
        type: "boxplot",
        // datasetIndex: 1,
        data: [data_box],
      },
      {
        name: "outlier",
        type: "scatter",
        // datasetIndex: 2,
        data: data_scatter,
        tooltip: {
          formatter: function (params) {
            return "离群点:" + params.data[2] + ":" + params.data[0];
          },
        },
      },
    ],
  };
  chart.setOption(option);
  chart.resize()
}

function bar(chartid, girth){
  let datas =  girth.sort((a,b)=>b[0]-a[0]).slice(0,9).reverse();
  var chart = echarts.init(document.getElementById(chartid));
 let option = {
  title: {
    text: "前10排行",
    left: "center",
    top: 20,
  },
  tooltip:{},
    grid:{
      left:'80px', 
    },
    yAxis: {
      type: 'category',
      data: datas.map(d=>d[1])
    },
    xAxis: {
      type: 'value',
      axisLabel:{hideOverlap:true}
    },
    series: [
      {
        data: datas.map(d=>d[0]),
        type: 'bar'
      }
    ]
  };
  chart.setOption(option);
  chart.resize()
}

function chord(chartid,graph){
  var chart = echarts.init(document.getElementById(chartid));
  let option = {
    legend: [
      {
        data: graph.categories.map(function (a) {
          return a.name;
        })
      }
    ],
    series: [
      {
        name: '',
        type: 'graph',
        layout: 'circular',
        circular: {
          rotateLabel: true
        },
        edgeSymbol: ['circle', 'arrow'],
        data: graph.nodes,
        links: graph.links,
        roam: true,
        label: {
          position: 'right',
          formatter: '{b}'
        },
        lineStyle: {
          color: 'source',
          curveness: 0.3
        }
      }
    ]
   };
   chart.setOption(option);
   chart.resize()
}

function antvchord(chartid,graph){
  var ds = new DataSet();
  var dv = ds.createView().source(graph, {
    type: 'graph',
    edges: function edges(d) {
      return d.links;
    }
  });
  dv.transform({
    type: 'diagram.arc',
    sourceWeight: function sourceWeight(e) {
      return e.sourceWeight;
    },
    targetWeight: function targetWeight(e) {
      return e.targetWeight;
    },
    weight: true,
    marginRatio: 0.3
  });

  let height = $('#chart3').height();
  let width = $('#chart3').width();
  var chart = new G2.Chart({
    container: chartid,
    // forceFit: true,
    height: height,
    width,
    padding: [30, 'auto', 'auto', 'auto']
  });
  chart.legend(false);
  chart.tooltip({
    showTitle: false
  });

  chart.scale({
    x: {
      sync: true
    },
    y: {
      sync: true
    }
  });

  var edgeView = chart.view();
  edgeView.source(dv.edges);
  edgeView.coord('polar').reflect('y');
  edgeView.axis(false);
  edgeView.edge().position('x*y').shape('arc').color('source').opacity(0.5).tooltip('source*target*value');

  var nodeView = chart.view();
  nodeView.source(dv.nodes);
  nodeView.coord('polar').reflect('y');
  nodeView.axis(false);
  nodeView.polygon().position('x*y').color('id').label('name', {
    labelEmit: true,
    textStyle: {
      fill: '#8c8c8c'
    }
  });

  chart.render();
  // chart.forceFit();
}

export default {
  histogram,
  boxplot,
  bar,
  chord,
  antvchord
}